<template>
	<view class="wraptop">
		<view class="content_input">
			<input type="text" maxlength="11" value="" v-model="userinfo.account" class="input_cot" style="text-align: left;border-radius: 40px;background-color: rgb(250,250,250);"
			 placeholder="账号" />
			<input type="number" maxlength="11" value="" v-model="userinfo.phone" class="input_cot" style="text-align: left;border-radius: 40px;background-color: rgb(250,250,250);"
			 placeholder="手机号" />
			<view style="position: relative;">
				<input type="text" value="" v-model="userinfo.captcha" class="input_cot" style="text-align: left;border-radius: 40px;background-color: rgb(250,250,250);font-size: 14px;"
				 placeholder="验证码" />
				<button id="button" :disabled="disbtn" style="position: absolute; top:11%; right: 10%; color:#dbdbdb;font-size: 14px;z-index: 99;"
				 @click="countTime(60)" hover-class="none">{{text}}</button>
			</view>
			<input type="password" maxlength="6" value="" v-model="userinfo.password" class="input_cot" style="text-align: left;border-radius: 40px;background-color: rgb(250,250,250);"
			 placeholder="密码" />
			<input type="password" maxlength="6" value="" v-model="userinfo.tpassword" class="input_cot" style="text-align: left;border-radius: 40px;background-color: rgb(250,250,250);"
			 placeholder="确认密码" />
		</view>
		<view class="btn" @click="regup">
			<text>修改</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				countdown: 60,
				btnDisabled: false,
				text: '获取验证码',
				disbtn: false,
				view_class: {
					height: ""
				},
				userinfo: {
					account: '',
					tpassword: '',
					captcha: '',
					password: '',
					phone: '',
					account: ''
				}
			}
		},
		onLoad: function() {
			this.view_class.height = uni.getSystemInfoSync().windowHeight
			// console.log(this.view_class.height)
		},
		methods: {

			countTime(second) {
				this.disbtn = true
				let intervalTimer = setInterval(() => {
					second -= 1;
					if (second >= 0) {
						// Vue中的写法
						this.text = second + "s后重新获取";
						this.btnDisabled = true;
					} else {
						clearInterval(intervalTimer);
						// Vue中的写法
						this.disbtn = false
						this.text = "获取验证码";
						this.codeBtnDisabled = false;
					}

				}, 1000);
				uni.request({
					url: this.G_base + '/api/register/verify',
					data: {
						type: "login",
						phone: this.userinfo.phone
					},
					method: "POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: (res) => {

						console.log(res)
						if (res.data.status = 200) {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						} else {
							uni.showToast({
								title: res.data.msg,
								image: '../../static/jinggao.png'
							})
						}
					},
					fail: (err) => {
						console.log(err)
					}
				});

			},
			regup() {

				let myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
				if (myreg.test(this.userinfo.account)) {
					uni.showToast({
						title: "手机号格式错误",
						duration: 1000,
						image: "../../static/jinggao.png"
					})
					return
				} else {
					// console.log(this.userinfo.account,this.userinfo.captcha,this.userinfo.tpassword)
					let token = uni.getStorageSync("token")
					uni.request({
						url: this.G_base + '/api/zf/reset',
						data: {
							account: this.userinfo.account,
							captcha: this.userinfo.captcha,
							password: this.userinfo.password,
							phone: this.userinfo.phone
						},
						method: "POST",
						header: {
							'content-type': 'application/x-www-form-urlencoded',
							'Authori-zation': 'Bearer ' + token
						},
						success: (res) => {
							console.log(res);
							if (res.data.status == 400) {
								uni.showToast({
									title: res.data.msg,
									icon:'none'
								})
							} else {
								uni.showToast({
									title: res.data.msg,
									icon:'none'
								})
								setTimeout(function(){
									uni.navigateBack({
										
									})
								},1000)
								
							}

						},
						fail: (err) => {
							console.log(err)
						}
					});
				}
				// 	console.log("请求完毕")
			}
		},
	}
</script>

<style>
	.bottom_cont text:nth-child(1) {
		margin-bottom: 7px;
	}

	button::after {
		border: none;
	}

	.bottom_cont text {

		top: 660px;
		width: 154px;
		color: rgba(16, 16, 16, 1);
		font-size: 14px;
		font-family: PingFangSC-regular;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 50%;
		transform: translateX(-50%);
	}

	.wraptop {
		background-color: rgb(255, 255, 255);
		padding-bottom: 30%;
	}

	.content_input {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 50px;
	}

	.input_cot {
		padding-left: 12px;
		width: 300px;
		height: 54px;
		line-height: 54px;
		border-radius: 20px;
		text-align: center;
		margin-bottom: 22px;
		color: rgba(16, 16, 16, 1);
		font-size: 14px;
		font-family: PingFangSC-regular;
	}

	.bottom_cont {
		margin-top: 32px;
	}

	.btn {

		background: -webkit-linear-gradient(left, #a00000, #e10004, #a00000);
		left: 107px;
		top: 578px;
		width: 164px;
		height: 50px;
		line-height: 20px;
		border-radius: 40px;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 50%;
		transform: translateX(-50%);

	}

	.btn text {
		color: #FFFFFF;
		left: 189px;
		top: 593px;
		width: 40px;
		height: 20px;
		font-size: 20px;
		text-align: center;
		font-family: PingFangSC-regular;
	}
</style>
